<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>猛龙国际</title>
	<link href="http://cdn.bootcss.com/Swiper/3.3.0/css/swiper.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./css/style.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
	<div class="banner">
		<div class="swiper-container">
		    <div class="swiper-wrapper banner-item">
		        <div class="swiper-slide">
		        	<img src="http://ofy6rzdis.bkt.clouddn.com/l1.png" alt="">
		        </div>
		         <div class="swiper-slide">
		        	<img src="http://ofy6rzdis.bkt.clouddn.com/l2.png" alt="">
		        </div>
		         <div class="swiper-slide">
		        	<img src="http://ofy6rzdis.bkt.clouddn.com/l3.png" alt="">
		        </div>
		         <div class="swiper-slide">
		        	<img src="http://ofy6rzdis.bkt.clouddn.com/l4.png" alt="">
		        </div>
		         <div class="swiper-slide">
		        	<img src="http://ofy6rzdis.bkt.clouddn.com/l5.png" alt="">
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		</div>
		<div class="banner-group">
			<div class="i1"><img src="http://ofy6rzdis.bkt.clouddn.com/logo.png" alt=""></div>
			<div class="banner-items-group">
				<div class="i2">
					<a>风采</a>
				</div>
				<div class="i3">
					<a>政要</a>
				</div>
			</div>
		</div>
	</div>

	<div class="body">
		<div class="nav">
			<ul>
				<li><a href="#">特卫保镖</a></li>
				<li><a href="#">驻地保卫</a></li>
				<li><a href="#">拓展训练</a></li>
				<li><a href="#">安防系统</a></li>
			</ul>
		</div>
		<div class="article">
			<article>
				<img class="art-image" src="http://ofy6rzdis.bkt.clouddn.com/k0.png" alt="">
				<div class="flex2">
					<div class="flex-item">
						<img src="http://ofy6rzdis.bkt.clouddn.com/k1.png" alt="">
					</div>
					<div class="flex-item">
						<img src="http://ofy6rzdis.bkt.clouddn.com/k2.png" alt="">
					</div>
				</div>
				<div class="flex2">
					<div class="flex-item">
						<img src="http://ofy6rzdis.bkt.clouddn.com/k3.png" alt="">
					</div>
					<div class="flex-item">
						<img src="http://ofy6rzdis.bkt.clouddn.com/k4.png" alt="">
					</div>
				</div>
			</article>
		</div>
		<div class="w90">
			<a href="javascript:;">
				<img  src="http://ofy6rzdis.bkt.clouddn.com/k5.png" alt="">
			</a>
		</div>
		<div class="w90">
			<a href="javascript:;">
				<img  src="http://ofy6rzdis.bkt.clouddn.com/k6.png" alt="">
			</a>
		</div>
		<div class="w90">
			<a href="javascript:;">
				<img  src="http://ofy6rzdis.bkt.clouddn.com/k7.png" alt="">
			</a>
		</div>
		<div class="w90">
			<a href="javascript:;">
				<img  src="http://ofy6rzdis.bkt.clouddn.com/k8.png" alt="">
			</a>
		</div>
		<div class="w90">
			<a href="javascript:;">
				<img  src="http://ofy6rzdis.bkt.clouddn.com/k9.png" alt="">
			</a>
		</div>
		<div class="footer">
			<div class="flex">
				<div class="flex-itema">
					<a href="javascript:;" class="active">主页</a>
				</div>
				<div class="flex-itema">
				<a href="javascript:;">服务范围</a>
				</div>
				<div class="flex-itema">
				<a href="javascript:;">我的猛龙</a>
				</div>
			</div>
		</div>
	</div>
	<br>
	<script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
	<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>
	<script>
		  var mySwiper = new Swiper ('.swiper-container', {
			    loop: true,
			    // 如果需要分页器
			    pagination: '.swiper-pagination',
			  }) ;
	</script>
</body>
</html>